<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同签章</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        accent: '#3B82F6',
                        light: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .contract-container {
                max-width: 816px; /* 模拟A4纸宽度 */
            }
            .signature-pad {
                border: 2px dashed #ccc;
                transition: all 0.3s ease;
            }
            .signature-pad:hover {
                border-color: #165DFF;
            }
            .signature-pad.active {
                border-style: solid;
                border-color: #165DFF;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen font-sans text-dark">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-primary">
                <i class="fa fa-file-text-o mr-2"></i>合同签章系统
            </h1>
            <div class="flex space-x-3">
                <button id="resetBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md transition-colors">
                    <i class="fa fa-refresh mr-1"></i>重置
                </button>
                <button id="saveBtn" class="px-4 py-2 bg-primary text-white hover:bg-primary/90 rounded-md transition-colors">
                    <i class="fa fa-download mr-1"></i>保存合同
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 签名者信息 -->
        <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
            <h2 class="text-xl font-semibold mb-4">签名者信息</h2>
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label for="signerName" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <input type="text" id="signerName" placeholder="请输入签名者姓名" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                </div>
                <div>
                    <label for="signDate" class="block text-sm font-medium text-gray-700 mb-1">日期</label>
                    <input type="date" id="signDate" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                </div>
            </div>
        </div>

        <!-- 合同内容和签名区域 -->
        <div class="contract-container mx-auto bg-white p-8 md:p-12 rounded-lg shadow-sm mb-8">
            <!-- 合同标题 -->
            <div class="text-center mb-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-2">技术开发服务合同</h2>
                <p class="text-gray-500 mb-2">合同编号：CONTRACT-TECH-2025-0830</p>
                <p class="text-gray-500">签订地点：中国深圳市南山区</p>
            </div>
            
            <!-- 合同正文 -->
            <div class="space-y-4 text-gray-800 leading-relaxed">
                <div class="flex justify-between items-start">
                    <p>甲方（委托方）：<u class="px-4">深圳创新科技有限公司</u></p>
                    <p>统一社会信用代码：<u class="px-4">91440300XXXXXXXX8X</u></p>
                </div>
                <div class="flex justify-between items-start">
                    <p>乙方（开发方）：<u class="px-4">智汇软件开发有限公司</u></p>
                    <p>统一社会信用代码：<u class="px-4">91440300XXXXXXXX9X</u></p>
                </div>

                <p class="my-4">本合同甲乙双方本着平等互利、诚实信用的原则，就技术开发服务事项，经友好协商，达成如下协议：</p>
                
                <p class="font-semibold mt-6">第一条 服务内容与范围</p>
                <p>1.1 服务内容：乙方接受甲方委托，为甲方开发人工智能数据分析平台系统（以下简称"本系统"）。</p>
                <p>1.2 具体开发内容包括但不限于：</p>
                <p class="ml-8">1) 数据采集与预处理模块</p>
                <p class="ml-8">2) 机器学习算法模块</p>
                <p class="ml-8">3) 可视化分析模块</p>
                <p class="ml-8">4) 用户管理系统</p>
                <p>1.3 开发周期：自合同签订之日起3个月内完成。</p>
                
                <p class="font-semibold mt-6">第二条 合同金额与支付方式</p>
                <p>2.1 合同总金额：人民币壹佰万元整（¥1,000,000.00）。</p>
                <p>2.2 支付方式：</p>
                <p class="ml-8">1) 合同签订后5个工作日内，支付总金额的40%作为预付款；</p>
                <p class="ml-8">2) 项目初验通过后，支付总金额的30%；</p>
                <p class="ml-8">3) 项目终验通过后，支付剩余30%。</p>
                
                <p class="font-semibold mt-6">第三条 双方权利义务</p>
                <p>3.1 甲方权利义务：</p>
                <p class="ml-8">1) 按时支付合同款项；</p>
                <p class="ml-8">2) 及时提供必要的技术资料和数据；</p>
                <p class="ml-8">3) 指派专人配合乙方开发工作。</p>
                <p>3.2 乙方权利义务：</p>
                <p class="ml-8">1) 按时保质完成开发任务；</p>
                <p class="ml-8">2) 提供详细的技术文档；</p>
                <p class="ml-8">3) 提供不少于6个月的免费维护服务。</p>
                
                <p class="font-semibold mt-6">第四条 知识产权</p>
                <p>4.1 本系统的知识产权归甲方所有。</p>
                <p>4.2 乙方保证其开发成果不侵犯任何第三方的知识产权。</p>
                
                <p class="font-semibold mt-6">第五条 保密条款</p>
                <p>5.1 双方应对在合作过程中知悉的对方商业秘密、技术信息等予以严格保密。</p>
                <p>5.2 保密义务期限：自本合同签订之日起五年内有效。</p>
                
                <p class="font-semibold mt-6">第六条 违约责任</p>
                <p>6.1 任何一方违反本合同约定，应向守约方支付合同总金额20%的违约金。</p>
                <p>6.2 违约金不足以弥补损失的，违约方还应赔偿因此造成的全部损失。</p>
                
                <p class="font-semibold mt-6">第七条 争议解决</p>
                <p>7.1 本合同履行过程中发生的争议，双方应友好协商解决。</p>
                <p>7.2 协商不成的，任何一方均可向深圳市南山区人民法院提起诉讼。</p>
                
                <p class="font-semibold mt-6">第八条 其他</p>
                <p>8.1 本合同自双方签字盖章之日起生效。</p>
                <p>8.2 本合同一式贰份，甲乙双方各执壹份，具有同等法律效力。</p>
                <p>8.3 本合同未尽事宜，双方可另行签订补充协议。</p>
            </div>
            
            <!-- 签名区域 -->
            <div class="mt-16">
                <div class="border-t-2 border-gray-200 pt-8">
                    <div class="grid md:grid-cols-2 gap-12">
                        <!-- 甲方签名区 -->
                        <div class="border border-gray-200 p-6 rounded-lg bg-gray-50">
                            <h3 class="text-lg font-semibold mb-4">甲方（委托方）签章区</h3>
                            <div class="space-y-4 mb-6">
                                <p class="text-sm text-gray-600">公司名称：深圳创新科技有限公司</p>
                                <p class="text-sm text-gray-600">法定代表人或授权代表：</p>
                            </div>
                            <div id="signaturePad1" class="signature-pad w-full h-36 mb-4 bg-white"></div>
                            <div class="flex flex-col space-y-2 text-sm text-gray-600">
                                <div class="flex justify-between">
                                    <span>签署人：</span>
                                    <span id="signerName1">_____________</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>签署日期：</span>
                                    <span id="signDate1">_____________</span>
                                </div>
                                <div class="mt-4 border-t border-dashed border-gray-300 pt-4 text-center">
                                    <p class="text-gray-500">(公章处)</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 乙方签名区 -->
                        <div class="border border-gray-200 p-6 rounded-lg bg-gray-50">
                            <h3 class="text-lg font-semibold mb-4">乙方（开发方）签章区</h3>
                            <div class="space-y-4 mb-6">
                                <p class="text-sm text-gray-600">公司名称：智汇软件开发有限公司</p>
                                <p class="text-sm text-gray-600">法定代表人或授权代表：</p>
                            </div>
                            <div id="signaturePad2" class="signature-pad w-full h-36 mb-4 bg-white"></div>
                            <div class="flex flex-col space-y-2 text-sm text-gray-600">
                                <div class="flex justify-between">
                                    <span>签署人：</span>
                                    <span id="signerName2">_____________</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>签署日期：</span>
                                    <span id="signDate2">_____________</span>
                                </div>
                                <div class="mt-4 border-t border-dashed border-gray-300 pt-4 text-center">
                                    <p class="text-gray-500">(公章处)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作说明 -->
        <div class="bg-white p-6 rounded-lg shadow-sm mb-8 max-w-2xl mx-auto">
            <h3 class="text-xl font-semibold mb-3 flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i>操作说明
            </h3>
            <ul class="space-y-2 text-gray-700">
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                    <span>在签名区域内按住鼠标/手指拖动进行签名</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                    <span>填写签名者信息后会自动显示在签名区域下方</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                    <span>点击"重置"按钮可以清除当前签名</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                    <span>点击"保存合同"按钮可以将签名后的合同保存为图片</span>
                </li>
            </ul>
        </div>
    </main>

    <footer class="bg-dark text-white py-6">
        <div class="container mx-auto px-4 text-center">
            <p>简易合同签章工具 &copy; 2023</p>
            <p class="text-gray-400 text-sm mt-1">注：本工具仅用于演示，不具备法律效力</p>
        </div>
    </footer>

    <!-- 成功提示模态框 -->
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-md w-full transform transition-all">
            <div class="text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-check text-2xl text-green-500"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">保存成功</h3>
                <p class="text-gray-600 mb-4">合同已成功保存为图片</p>
                <button id="closeModal" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    确定
                </button>
            </div>
        </div>
    </div>

    <script>
        // 设置默认日期为今天
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('signDate').value = today;
            
            // 初始化两个签名板
            initSignaturePad('signaturePad1', 'signerName1', 'signDate1');
            initSignaturePad('signaturePad2', 'signerName2', 'signDate2');
            
            // 重置按钮事件
            document.getElementById('resetBtn').addEventListener('click', function() {
                if(confirm('确定要清除所有签名吗？')) {
                    resetSignaturePad('signaturePad1');
                    resetSignaturePad('signaturePad2');
                }
            });
            
            // 保存按钮事件
            document.getElementById('saveBtn').addEventListener('click', saveContractAsImage);
            
            // 关闭模态框
            document.getElementById('closeModal').addEventListener('click', function() {
                document.getElementById('successModal').classList.add('hidden');
            });
            
            // 监听签名者信息变化，更新显示
            document.getElementById('signerName').addEventListener('input', updateSignerInfo);
            document.getElementById('signDate').addEventListener('change', updateSignerInfo);
        });
        
        // 当前激活的签名板
        let activeCanvas = null;
        
        // 初始化签名板
        function initSignaturePad(padId, nameElementId, dateElementId) {
            const padElement = document.getElementById(padId);
            
            // 创建canvas元素作为签名板
            const canvas = document.createElement('canvas');
            canvas.id = padId + 'Canvas';
            canvas.width = padElement.offsetWidth;
            canvas.height = padElement.offsetHeight;
            canvas.className = 'w-full h-full';
            
            // 清空并添加canvas
            padElement.innerHTML = '';
            padElement.appendChild(canvas);
            
            // 获取2D上下文
            const ctx = canvas.getContext('2d');
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';
            
            // 签名状态变量
            let isDrawing = false;
            let lastX = 0;
            let lastY = 0;
            
            // 鼠标/触摸事件处理函数
            function startDrawing(e) {
                isDrawing = true;
                activeCanvas = canvas;
                
                // 为不同设备设置起始点
                if (e.type.includes('mouse')) {
                    [lastX, lastY] = [e.offsetX, e.offsetY];
                } else {
                    const rect = canvas.getBoundingClientRect();
                    [lastX, lastY] = [
                        e.touches[0].clientX - rect.left,
                        e.touches[0].clientY - rect.top
                    ];
                }
                
                padElement.classList.add('active');
            }
            
            function draw(e) {
                if (!isDrawing || activeCanvas !== canvas) return;
                
                e.preventDefault();
                
                let currentX, currentY;
                
                // 获取当前坐标
                if (e.type.includes('mouse')) {
                    [currentX, currentY] = [e.offsetX, e.offsetY];
                } else {
                    const rect = canvas.getBoundingClientRect();
                    [currentX, currentY] = [
                        e.touches[0].clientX - rect.left,
                        e.touches[0].clientY - rect.top
                    ];
                }
                
                // 绘制线条
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(currentX, currentY);
                ctx.stroke();
                
                // 更新最后坐标
                [lastX, lastY] = [currentX, currentY];
            }
            
            function stopDrawing() {
                isDrawing = false;
                padElement.classList.remove('active');
            }
            
            // 添加事件监听器
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);
            
            // 触摸设备支持
            canvas.addEventListener('touchstart', startDrawing);
            canvas.addEventListener('touchmove', draw);
            canvas.addEventListener('touchend', stopDrawing);
            
            // 存储相关元素引用
            canvas.signatureData = {
                nameElement: document.getElementById(nameElementId),
                dateElement: document.getElementById(dateElementId),
                padElement: padElement
            };
            
            // 初始更新签名者信息
            updateSignerInfo();
        }
        
        // 重置签名板
        function resetSignaturePad(padId) {
            const canvas = document.getElementById(padId + 'Canvas');
            if (canvas) {
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
        }
        
        // 更新签名者信息显示
        function updateSignerInfo() {
            const signerName = document.getElementById('signerName').value;
            const signDate = document.getElementById('signDate').value;
            
            // 更新所有签名区域的信息显示
            document.querySelectorAll('canvas[id$="Canvas"]').forEach(canvas => {
                if (canvas.signatureData && signerName) {
                    canvas.signatureData.nameElement.textContent = `签名人：${signerName}`;
                }
                if (canvas.signatureData && signDate) {
                    canvas.signatureData.dateElement.textContent = `日期：${signDate}`;
                }
            });
        }
        
        // 将合同保存为图片
        function saveContractAsImage() {
            // 检查是否已签名
            const hasSignature1 = isCanvasEmpty('signaturePad1Canvas');
            const hasSignature2 = isCanvasEmpty('signaturePad2Canvas');
            
            if (!hasSignature1 && !hasSignature2) {
                alert('请至少完成一个签名');
                return;
            }
            
            // 检查是否填写了签名人姓名
            if (!document.getElementById('signerName').value) {
                alert('请填写签名人姓名');
                return;
            }
            
            // 引入html2canvas库用于将HTML转换为图片
            const script = document.createElement('script');
            script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
            script.onload = function() {
                const contractElement = document.querySelector('.contract-container');
                
                // 配置转换选项
                html2canvas(contractElement, {
                    scale: 2, // 提高分辨率
                    useCORS: true,
                    logging: false
                }).then(canvas => {
                    // 创建下载链接
                    const link = document.createElement('a');
                    link.download = `合同_${new Date().getTime()}.png`;
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                    
                    // 显示成功提示
                    document.getElementById('successModal').classList.remove('hidden');
                });
            };
            
            document.body.appendChild(script);
        }
        
        // 检查Canvas是否为空
        function isCanvasEmpty(canvasId) {
            const canvas = document.getElementById(canvasId);
            if (!canvas) return false;
            
            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            
            // 检查是否有绘制内容
            for (let i = 0; i < imageData.data.length; i += 4) {
                // 检查非透明像素
                if (imageData.data[i + 3] !== 0) {
                    return true;
                }
            }
            
            return false;
        }
    </script>
</body>
</html>
